<template>
	<view class="layout">
		<!-- 组件 -->
		<public-nav-item title="童之梦"></public-nav-item>
		<!-- 搜索框那一行 -->
		<adshow></adshow>
		<view class="search-all">
			<!-- 搜索框 -->
			<navigator url="/pages/search/search" class="search">
				<!-- 定位 -->
				<view class="ip">
					<!-- ip图片 -->
					<view class="ip-icon">
						<image src="../../static/ip.png" mode=""></image>
					</view>
					<!-- ip地址 -->
					<view class="ip-address">杭州商场店</view>
				</view>
				<!-- 关键词 -->
				<view class="keyword">搜索奶粉</view>
				<!-- 图标 -->
				<view class="search-icon">
					<image src="../../static/s1.png" mode=""></image>
				</view>
			</navigator>
			<!-- 搜索框右边的 -->
			<view class="share">
				<!-- 图片左边大框 -->
				<!-- 弹窗 -->
				
				<view class="share-left" @click="showimg = true">
					<!-- 左边图片 -->
					<view class="share-left-icon">
						<image src="../../static/icq.png" mode=""></image>
					</view>
					<!-- 左边之 -->
					<view class="share-left-zi">会员码</view>
				</view>

				<!-- 右边图片 -->
				<view class="share-right">
					<view class="share-right-icon">
						<image src="../../static/share.png" mode=""></image>
					</view>
					<!-- zi -->
					<view class="share-right-zi">分享</view>
				</view>
			</view>
		</view>

		<!-- 轮播图 -->
		<view class="nav-swiper">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" indicator-active-color="#fffcf3" indicator-color="#efefef">
				<swiper-item v-for="item in 3">
					<image src="../../static/bg1.png" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>


		<!-- 轮播图下方 -->
		<view class="brand">
			<!-- 牌子 -->
			<navigator :url="`/pages/detail/detail?title=`+item.brandname" class="brand-box" v-for="item in brandlist[0]">
				<view class="brand-img">
					<image :src="item.imgUrl" mode=""></image>
				</view>
				<!-- zi -->
				<view class="brand-zi">
					{{ item.brandname }}
				</view>
			</navigator>
		</view>

		<!-- 标题 -->

		<view class="hh">热销商品</view>

		<!-- 商品列表 -->
		<view class="goods-list">
			<!-- 单独一个 -->
			<navigator url="/pages/gddetail/gddetail" class="goods-img-box" v-for="item in fordian[0]">
				<view class="goods-img">
					<image src="../../static/bg1.png" mode=""></image>
				</view>
				<view v-show="item.is_hot? true : false" class="goods-icon">
					<!-- 热卖 -->
					<view class="goods-hot">{{ item.title }}</view>
				</view>
				<view class="goods-title">
					商品名字
				</view>
				<view class="goods-li">
					<view class="goods-price">Y{{ item.price }}</view>
					<view class="goods-sold">已卖{{ item.sold }}</view>
				</view>
				<view class="goods-address">
					<view class="goods-type" v-show="item.type_offical===1 ? true:false ">官方</view>
					<view class="goods-typeone" v-show="item.type_offical===2 ? true: false ">门店自营</view>
					<view class="goods-ad">{{ item.content }}</view>
				</view>
			</navigator>
			
			
		</view>
	</view>
</template>

<script setup>
	import {ref,onMounted} from 'vue'
	import {onLoad,onShow,onShareAppMessage,onShareTimeline,onLaunch} from "@dcloudio/uni-app";
	
	// 分享到朋友
	onShareAppMessage((e)=>{
		console.log("分享",e)
		return {
			title:'大健康',
			path:'/pages/index/index',
			desc:'123123'
		}
	})
	// 朋友圈
	onShareTimeline((e)=>{
		console.log("朋友圈",e)
	})

	const fordian = ref([
		[{
				title: '热卖',
				content: '执行食物疑难问题',
				price: 22,
				sold: 123,
				type_offical:2,
				is_hot:true
			},
			{
				title: '热卖',
				content: '杭州食物疑难问题',
				price: 22,
				sold: 123,
				type_offical:3,
				is_hot:false
			},
			{
				title: '热卖',
				content: '执行食物疑难问题',
				price: 22,
				sold: 123,
				type_offical:1,
				is_hot:false
			},
			{
				title: '热卖',
				content: '执行食问题',
				price: 22,
				sold: 123,
				type_offical:2,
				is_hot:false
			},
			{
				title: '热卖',
				content: '执行食物疑难问题',
				price: 22,
				sold: 123,
				type_offical:2,
				is_hot:true
			},
			{
				title: '热卖',
				content: '执行食物疑难问题',
				price: 22,
				sold: 123,
				type_offical:3,
				is_hot:true
			},
			{
				title: '热卖',
				content: '执行食物疑难问题',
				price: 22,
				sold: 123,
				type_offical:2,
				is_hot:true
			},
			{
				title: '名字1',
				content: '执行食物疑难问题',
				price: 23,
				sold: 123,
				type_offical:1,
				is_hot:true
			}
		]
	])
	// 品牌列表
	const brandlist = ref([
		[
			{brandname: "官方商品",
				imgUrl:'../../static/icon1.png'},
			{brandname:"商学院",
				imgUrl:'../../static/icon2.png'},
			{brandname:"推广拉新",
				imgUrl:'../../static/icon3.png'},
			{brandname:"会员中心",
				imgUrl:'../../static/icon4.png'},
			{brandname:"自研中心",
				imgUrl:'../../static/icon5.png'}
		]
	])
</script>

<style scoped lang="scss">
	.layout {
		background-color: #efefef;
		// 搜索框一专栏
		.search-all {
			width: 750rpx;
			height: 112rpx;
			// border: 1px solid red;
			display: flex;

			// 框的本身
			.search {
				display: flex;
				width: 566rpx;
				height: 72rpx;
				// border: 1px solid green;
				border-radius: 40rpx;
				margin: 20rpx;
				background: #ffffff;

				.ip {
					width: 178rpx;
					height: 32rpx;
					line-height: 32rpx;
					margin: 20rpx;
					border-right: 1rpx solid #cccccc;
					display: flex;

					.ip-icon {
						width: 18.12rpx;
						height: 27.62rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.ip-address {
						width: 138rpx;
						height: 32rpx;
						// border: 1px solid gold;
						font-size: 26rpx;
						font-weight: 400;
						line-height: 32rpx;
						margin-left: 14.94rpx;
					}
				}

				// 关键字
				.keyword {
					width: 124rpx;
					height: 42rpx;
					// border: 1px solid red;
					font-size: 26rpx;
					line-height: 42rpx;
					font-weight: 400;
					color: #999999;
					margin: 15rpx 0 15rpx 0;
				}

				// 搜索图标
				.search-icon {
					width: 20.93rpx;
					height: 21.6rpx;
					line-height: 21.6rpx;
					margin: 25.34rpx 25.74rpx 25.06rpx 209.34rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}


			// 右边的图片加
			.share {
				width: 124rpx;
				height: 68rpx;
				// border: 1px solid red;
				line-height: 68rpx;
				margin: 20rpx 20rpx 20rpx 0;
				display: flex;
				

				.share-left {
					width: 60rpx;
					height: 68rpx;
					// border: 1px solid red;

					.share-left-icon {
						width: 24rpx;
						height: 24.02rpx;
						line-height: 24.02rpx;
						margin: 2rpx 18rpx 2rpx 18rpx;
						// border: 1px solid green;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.share-left-zi {
						width: 60rpx;
						height: 36rpx;
						line-height: 36rpx;
						// border: 1px solid red;
						font-size: 20rpx;
					}
				}

				// 右边
				.share-right {
					width: 40rpx;
					height: 68rpx;
					// border: 1px solid red;
					margin-left: 24rpx;

					.share-right-icon {
						width: 28rpx;
						height: 28rpx;
						line-height: 28rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.share-right-zi {
						width: 40rpx;
						height: 36rpx;
						// border: 1px solid gray;
						line-height: 36rpx;
						font-size: 20rpx;
					}
				}
			}
		}


		// 轮播图大框
		.nav-swiper {
			width: 750rpx;
			height: 322rpx;

			swiper {
				width: 750rpx;
				height: 322rpx;

				swiper-item {
					width: 100%;
					height: 100%;
					// margin-left: 39rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

		}


		.brand {
			width: 702rpx;
			height: 182rpx;
			// border: 1px solid red;
			background: #ffffff;
			border-radius: 10rpx;
			margin: 24rpx;
			display: flex;

			.brand-box {
				width: 111.6rpx;
				height: 134rpx;
				// border: 1px solid red;
				margin: 24rpx 0 24rpx 24rpx;

				.brand-img {
					width: 80rpx;
					height: 80rpx;
					// border: 1px solid red;
					line-height: 80rpx;
					margin: 0 15.8rpx 0 15.8rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				// 
				.brand-zi {
					width: 104rpx;
					height: 38rpx;
					font-size: 26rpx;
					font-weight: 400;
					line-height: 38rpx;
					// border: 1px solid red;
					margin: 16rpx 3.6rpx 0 3.6rpx;
				}
			}
		}


		.hh {
			width: 307rpx;
			height: 44rpx;
			margin: 24rpx;
			font-weight: 500;
		}

		.goods-list {
			width: 702rpx;
			height: 1520rpx;
			// border: 1px solid red;
			margin: 24rpx;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: repeat(2, 1fr);
			grid-gap: 24rpx;

			// border: 1px solid red;

			.goods-img-box {
				position: relative;
				width: 339rpx;
				height: 362rpx;
				background: #ffffff;

				.goods-img {
					width: 339rpx;
					height: 198rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.goods-icon {
					position: absolute;
					top: 0;
					right: 0;
					background-color: #ef0a19;
					width: 72rpx;
					height: 48rpx;
					border-bottom-left-radius: 20rpx;
					border-top-right-radius: 10rpx;
					line-height: 48rpx;
					color: #efefef;
					.goods-hot {
						width: 48rpx;
						height: 32rpx;
						line-height: 32rpx;
						font-size: 24rpx;
						font-weight: 350;
						// border: 1px solid white;
						margin: 8rpx 12rpx;
					}
				}

				.goods-title {
					width: 307rpx;
					height: 44rpx;
					font-size: 28rpx;
					line-height: 44rpx;
					font-weight: 500;
					margin: 8rpx 16rpx;
					// border: 1px solid red;
				}

				.goods-li {
					display: flex;
					width: 307rpx;
					// border: 1px solid red;
					margin: 0 16rpx;

					.goods-price {
						width: 146rpx;
						height: 44rpx;
						color: #ef0a19;
						font-weight: 600;
					}

					.goods-sold {
						width: 108rpx;
						height: 44rpx;
						line-height: 44rpx;
						color: #cccccc;
						font-size: 24rpx;
						margin-left: 55rpx;
					}
				}

				.goods-address {
					width: 307rpx;
					height: 36rpx;
					line-height: 36rpx;
					// border: 1px solid red;
					margin: 8rpx 16rpx;
					display: flex;
					.goods-type {
						width: 44rpx;
						height: 22rpx;
						font-size: 22rpx;
						line-height: 22rpx;
						// border: 1px solid #ef0a19;
						border-radius: 3rpx;
						background: #EBC980;
						margin:5rpx 8rpx 5rpx 0;
						padding: 2rpx 4rpx;
					}
					// 第二种门店
					.goods-typeone {
						width: 88rpx;
						height: 22rpx;
						line-height: 22rpx;
						background: #000000;
						color: #ffffff;
						margin: 7rpx 8rpx 7rpx 0;
						font-size: 22rpx;
						font-weight: 400;
						padding: 2rpx 4rpx;
						border-radius: 4rpx;
					}
					
					.goods-ad {
						font-size: 24rpx;
					}
				}
			}




		}
	}
</style>